<template>
    <section class="collect-server intelligent-content-bg overflowYAll">
        <div class="intelligent-content-box">
        	<div class="page1" v-if="currentPage===1">
      			<form-common 
      				@add="add" 
      				@search = "search"
      				:formLabel="formLabel" 
      				:formInline="formInline"
      				>
				</form-common>
      			<table-common 
                    @handleCurrentChange = "handleCurrentChange" 
                    :loading = "loading"
                    :total="total" 
                    @detail="detail" 
                    @edit="edit" 
                    @del="del"  
                    :tableLabel="tableLabel" 
                    :tableData="tableData">
                </table-common>
    		</div>
    		
    		<div class="page2"  v-if="currentPage===2">
    			<collect-server-from @closeForm='closeForm' @goBack="goBack"></collect-server-from>
    		</div>
    		
    		<div class="page2"  v-if="currentPage===3">
    			<collect-detail :detailData="detailData" @goBack="goBack"></collect-detail>
    		</div>
    		
    		<div class="page2" v-if="currentPage===4">
    			<collect-server-updata 
    				v-if="currentPage===4"
    				:updataId="updataId"  
    				@goBack="goBack">
				</collect-server-updata>
    		</div>
		</div>
    </section>
</template>

<script>
	import formCommon from "../common/formCommon"
	import tableCommon from "../common/tableCommon"
	import collectServerFrom from "./collectServerFrom"
	import collectDetail from "../common/collectServerDetail"
	import collectServerUpdata from "./collectServerUpdata"
	import {
		computedGetCollectDetail,
		componentGetYwType,
		componentCollectAll
	} from "../common/js_css_img/serverResourceComputed"
	import {
		apiGetShareCollectList,
        apiShareCollectServerDelete,
	} from "../common/js_css_img/serverResourceApi"
	import {organizationDataExchangeQuyu} from "../../api/data-exchange-api.js"
    export default {
    	components:{
    		formCommon,
    		tableCommon,
    		collectServerFrom,
    		collectDetail,
    		collectServerUpdata
    	},
        data() {
          	return {
				loading:false,
				total:0,
				currentPage:1,
				dialog1Visible:false,
				updataId:0,
				areaQuyu: [],	//所属区域列表
				formInline:{
					type:'',
					myInput:"",
				},
				treeSeach:{
					segment:[],/*网段类型*/
					info_type:[],/*信息类型*/
					business_type:[],/*业务类型*/
				},
				form:{
						"serviceType":2,       //1是共享类，2是采集类，当你访问的是什么列表传什么
						"businessTypeIds":[],   //业务类型
						"name":"",   //名称
						"pageNum":1,
						"pageSize":10
				},
				formLabel:[
					{
						type:'button',
						placeholder:'新增',
						label:'',
						float:"left",
						method:'add'
					},
					{
						type:'select',
						placeholder:'请选择',
						// label:'业务分类 ：',
						float:"right",
						model:'selectName',
						options:[],
					},
					{
						type:'input',
						placeholder:'请输入资源名称搜索',
						label:'',
						model:'inputName',
						float:"right",
					},
					{
						type:'button2',
						placeholder:'查询',
						label:'',
						float:"left",
						method:'search'
					},
				],
				tableLabel:{
					name:"服务名称",
					areaId:'所在区域',
					businessType:'业务类别',
					infoType:'信息类别',
					createTime:'创建时间',
				},
				tableData:[],
				detailData:[
						{
							title:"基本信息",
							lebelWidth:"150px",
							elForm:[
								{
									name:'服务名称',
									value:"",
									type:'1'
								},
								{
									name:'服务标识',
									value:"",
									type:'1'
								},
								{
									name:'资源所在网段',
									value:"",
									type:'1'
								},
								{
									name:'服务类型',
									value:"",
									type:'1'
								},
								{
									name:'业务类型',
									value:[],
									type:'3'
								},
								{
									name:'信息类型',
									value:[],
									type:'3'
								},
								{
									name:'描述',
									value:"",
									type:'1'
								},
								
							],
						},
						{
							title:"运行计划",
							lebelWidth:"150px",
							elForm:[
								{
									name:'时间类型',
									value:"无",
									type:'1'
								},
								{
									name:'开始时间',
									value:"无",
									type:'1'
								},
								{
									name:'间隔时间',
									value:"无",
									type:'1'
								},
								{
									name:'结束时间',
									value:"无",
									type:'1'
								},
								{
									name:'选择时间',
									value:"无",
									type:'1'
								},
								{
									name:'具体时间',
									value:"无",
									type:'1'
								},
								{
									name:'异常处理',
									value:"无",
									type:'1'
								},
								{
									name:'可发布区域',
									value:[],
									type:'1'
								},
								{
									name:'CPU分配',
									value:"",
									type:'1'
								},
								{
									name:'内存分配',
									value:"",
									type:'1'
								},
								
							],
						},
						{
							title:"数据来源",
							lebelWidth:"150px",
							elForm:[
								{
									name:'数据来源类型',
									value:"",
									type:"1"
								},
								{
									name:'FTP数据源',
									value:"",
									type:"1"
								},
								{
									name:'文件目录',
									value:"",
									type:"1"
								},
								{
									name:'指定文件',
									value:"",
									type:"1"
								},
								{
									name:'统配规则',
									value:"",
									type:"1"
								},
								{
									name:'采集方式',
									value:"",
									type:"1"
								},
								{
									name:'数据匹配',
									value:[],
									type:"2"
								},
								
							],
						},
						{
							title:"数据目的地",
							lebelWidth:"150px",
							elForm:[
								{
									name:'数据来源类型',
									value:"无",
									type:"1"
								},
								{
									name:'FTP数据源',
									value:"无",
									type:"1"
								},
								{
									name:'文件目录',
									value:"无",
									type:"1"
								},
								{
									name:'保存的文件类型',
									value:"无",
									type:"1"
								},
								{
									name:'保存文件命名规则',
									value:"无",
									type:"1"
								},
								{
									name:'数据源名称',
									value:"无",
									type:"1"
								},
								{
									name:'存储位置(数据库)',
									value:"无",
									type:"1"
								},
								{
									name:'数据匹配',
									value:[],
									type:"2"
								}
							],
						},
					],
					detailDataBackUp:[
						{
							title:"基本信息",
							lebelWidth:"150px",
							elForm:[
								{
									name:'服务名称',
									value:"",
									type:'1'
								},
								{
									name:'服务标识',
									value:"",
									type:'1'
								},
								{
									name:'资源所在网段',
									value:"",
									type:'1'
								},
								{
									name:'服务类型',
									value:"",
									type:'1'
								},
								{
									name:'业务类型',
									value:[],
									type:'3'
								},
								{
									name:'信息类型',
									value:[],
									type:'3'
								},
								{
									name:'描述',
									value:"",
									type:'1'
								},
								
							],
						},
						{
							title:"运行计划",
							lebelWidth:"150px",
							elForm:[
								{
									name:'时间类型',
									value:"无",
									type:'1'
								},
								{
									name:'开始时间',
									value:"无",
									type:'1'
								},
								{
									name:'间隔时间',
									value:"无",
									type:'1'
								},
								{
									name:'结束时间',
									value:"无",
									type:'1'
								},
								{
									name:'选择时间',
									value:"无",
									type:'1'
								},
								{
									name:'具体时间',
									value:"无",
									type:'1'
								},
								{
									name:'异常处理',
									value:"无",
									type:'1'
								},
								{
									name:'可发布区域',
									value:[],
									type:'1'
								},
								{
									name:'CPU分配',
									value:"",
									type:'1'
								},
								{
									name:'内存分配',
									value:"",
									type:'1'
								},
								
							],
						},
						{
							title:"数据来源",
							lebelWidth:"150px",
							elForm:[
								{
									name:'数据来源类型',
									value:"",
									type:"1"
								},
								{
									name:'FTP数据源',
									value:"",
									type:"1"
								},
								{
									name:'文件目录',
									value:"",
									type:"1"
								},
								{
									name:'指定文件',
									value:"",
									type:"1"
								},
								{
									name:'统配规则',
									value:"",
									type:"1"
								},
								{
									name:'采集方式',
									value:"",
									type:"1"
								},
								{
									name:'数据匹配',
									value:[],
									type:"2"
								},
								
							],
						},
						{
							title:"数据目的地",
							lebelWidth:"150px",
							elForm:[
								{
									name:'数据来源类型',
									value:"无",
									type:"1"
								},
								{
									name:'FTP数据源',
									value:"无",
									type:"1"
								},
								{
									name:'文件目录',
									value:"无",
									type:"1"
								},
								{
									name:'保存的文件类型',
									value:"无",
									type:"1"
								},
								{
									name:'保存文件命名规则',
									value:"无",
									type:"1"
								},
								{
									name:'数据源名称',
									value:"无",
									type:"1"
								},
								{
									name:'存储位置(数据库)',
									value:"无",
									type:"1"
								},
								{
									name:'数据匹配',
									value:[],
									type:"2"
								}
							],
						},
					],
          	};
        },
        methods: {
        	closeForm(){
        		this.currentPage = 1;
        		this.getList();
        	},
        	onSubmit(){
        		
        	},
        	add(){
        		this.currentPage = 2;
        	},
        	handleCurrentChange(val){
				 this.form.pageNum = val
				 this.getList();
        	},
        	search(val){
        		//解决区域为空时，搜索框输入内容搜索不出东西
            console.log(val.selectName);
						if(val.selectName ==="9527" ){
							this.form.businessTypeIds = [];
						}else if(val.selectName ===undefined){
							this.form.businessTypeIds = [];
						}else{
							this.form.businessTypeIds = [val.selectName];
						}
						this.form.name = val.inputName;
						this.getList();
        	},
        	edit(scope){
        		this.updataId = scope.row.id;
        		this.currentPage = 4;
        	},
        	detail(scope){
        		computedGetCollectDetail(this,scope.row.id)
        		this.currentPage = 3;
        	},
            del(scope){
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                  apiShareCollectServerDelete({},scope.row.id);
                  setTimeout(()=>{this.getList()},1000);
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  });          
                });
            },
        	goBack(){
        		this.currentPage = 1;
        		this.getList();
        	},
        	getList(){
        		this.loading=true;
        		apiGetShareCollectList(this.form).then((res)=>{
        			this.tableData = [];
                    console.log('listSearchCollect')
        			if(res.data.code = 'S100101'){
        				this.total = res.data.data.total;
        				for(let i in res.data.data.list){
									this.areaQuyu.map(req=>{
										if(req.id === res.data.data.list[i].areaId){
											res.data.data.list[i].areaId = req.name
										}
									});
        					this.tableData.push(
        						{
        							name:res.data.data.list[i].name,
					          		areaId:res.data.data.list[i].areaId,
					          		businessType:this.getTreeNameById('business_type',res.data.data.list[i].resourceService.businessType),
					          		infoType:this.getTreeNameById('info_type',res.data.data.list[i].resourceService.infoType),
					          		createTime:res.data.data.list[i].createTime,
					          		id :res.data.data.list[i].id,
        						}
        					)
        				}
        				this.loading=false;
        			}else{
        				this.$message.error(res.data.msg);
        			}
        		})
        	},
        	getTreeNameById(name,id){/*获取业务类型，信息类型，网段的名字,通过id*/
        		console.log(name,id);
        		if(id.indexOf(",")!=-1){
        			let ids = id.split(',');
        			let trees = '';
        			console.log(ids);
        			for (let i = 0; i < ids.length; i++) {
        				trees+=this.getTreeNameById(name,ids[i])+' ,'/*递归去做*/
        			}
        		 	console.log(trees);
        		 	return trees.substring(0,trees.length-1);
        			
        		}
        		let tree='';
        		for (let i = 0; i < this.treeSeach[name].length; i++) {
        			if(this.treeSeach[name][i].id == Number(id)){
        				tree = this.treeSeach[name][i].name;
        				console.log(tree);
        			}
        		}
        		return tree;
        	}
        },
        mounted(){
					organizationDataExchangeQuyu({}).then(res =>{   //查询区域
							this.areaQuyu = res.data.data.list;
							console.log(res.data.data.list);
							componentGetYwType(this,'');
							componentCollectAll(this);
							this.formLabel[2].options=this.treeSeach.business_type;
							this.getList();
            }).catch(error =>{
                console.log(error);
          });
        }
  };
</script>

<style scoped="scoped">
    .page2{
    	width: 850px;
    }
</style>